<template>
	<div class="evaluationTrain">
		<main>
			<header>
				<img src="@/assets/img/evaluationt_train_bg.png" />
			</header>
			<van-list
				class="list"
				v-model:loading="state.loading"
				:immediate-check="false"
				:finished="state.finished"
				finished-text="没有更多了"
				@load="getEvaluationList"
			>
				<template v-for="item of state.evaluationList" :key="item.id">
					<div class="card" @click="edit(item)">
						<div class="title">
							<div>{{ item.username }}</div>
							<span>{{ item.add_time }}</span>
						</div>
						<van-rate
							v-model="item.star_num"
							readonly
							:size="12"
							color="#ffd21e"
							void-icon="star"
							void-color="#F5F5F5"
						/>
						<p class="van-multi-ellipsis--l2">
							{{ item.content }}
						</p>
					</div>
				</template>
			</van-list>
		</main>

		<div class="buy_now">
			<van-button size="large" @click="router.push({ name: 'score' })">立即评价</van-button>
			<van-button class="btn_wht" size="large" @click="state.show = true">评价须知</van-button>
		</div>

		<MyDialogBtn v-model:show="state.show" column>
			<template #content>
				<div style="max-height: 50vh; overflow: scroll">
					<div style="margin-bottom: 30px">评价须知</div>
					<p style="font-size: 13px; text-align: left; line-height: 24px">
						{{ state.evaluate_content }}
					</p>
				</div>
			</template>
			<template #btn>
				<van-button type="primary" @click="state.show = false">我知道了</van-button>
			</template>
		</MyDialogBtn>
	</div>
</template>

<script setup lang="ts">
import { ref, reactive, onMounted } from 'vue';
import { useMainStore } from '@/store/index';
import { useRouter } from 'vue-router';
import { evaluationList } from '@/api/my';
import { globalConfigValue } from '@/api/common';
import MyDialogBtn from '@/components/MyDialogBtn.vue';

const mainStore = useMainStore();
const router = useRouter();
const state = reactive<any>({
	show: false,
	pageInfo: {
		pageIndex: 1,
		pageSize: 10,
		user_id: mainStore.user_id,
		type: mainStore.storeIsLogin ? 1 : 0
	},
	loading: false,
	finished: false,
	evaluationList: [],
	evaluate_content: ''
});

onMounted(() => {
	getEvaluationList();
	getGlobalConfigValue();
});

const edit = (item: any) => {
	router.push({ name: 'score', query: { item: JSON.stringify(item) } });
};

const getEvaluationList = async () => {
	const res = await evaluationList(state.pageInfo);
	let { dataList } = res.data;
	if (dataList.length) {
		state.pageInfo.pageIndex++;
		state.evaluationList = [...state.evaluationList, ...dataList];
		state.loading = false;
	} else {
		state.finished = true;
	}
};

const getGlobalConfigValue = async () => {
	const res = await globalConfigValue('evaluate_content');
	state.evaluate_content = res.data.item_value;
};
</script>

<style lang="scss" scoped>
.evaluationTrain {
	// min-height: 100vh;
	background: #f5f5f5;

	main {
		padding: 15px;

		header {
			margin-bottom: 10px;
			img {
				width: 100%;
				height: 150px;
				object-fit: cover;
			}
		}

		.list {
			height: calc(100vh - 150px - 30px - 65px - env(safe-area-inset-bottom));
			overflow: scroll;
			.card {
				box-sizing: border-box;
				padding: 15px;
				margin-bottom: 5px;
				background: #ffffff;
				border-radius: 5px;
				&:active {
					background: #fbfbfb;
				}
				.title {
					@include flx-justify-between;
					color: #999999;
					font-size: 12px;
					font-weight: 400;
					div {
						color: #333333;
						font-size: 15px;
						font-weight: bold;
					}
				}
				p {
					margin-top: 5px;
					color: #4d4d4d;
					font-size: 13px;
					line-height: 17px;
					text-align: justify;
				}
			}
		}
	}
	.buy_now {
		@include flx-justify-between;
		position: fixed;
		left: 0;
		right: 0;
		bottom: env(safe-area-inset-bottom);
		height: 65px;
		padding: 0 15px;
		box-shadow: 0px -5px 11px 0px rgba(228, 228, 228, 0.82);
		background: white;

		button {
			width: 225px;
			height: 43px;
			border-radius: 22px;
			color: white;
			font-size: 15px;
			font-weight: 400;
			background: linear-gradient(86deg, #f53d7d, #fb56b3);
		}
		.btn_wht {
			width: 110px;
			color: #f53d7d;
			border: 1px solid #fd97cd;
			background: white;
		}
	}
}
</style>
